import React from 'react';
import {View, TouchableHighlight} from 'react-native';
import PropTypes from 'prop-types';
import TableCellIcon from "./TableCellIcon";
import TableCellContent from "./TableCellContent";
import TableCellTitle from "./TableCellTitle";
import TableCellSubTitle from "./TableCellSubTitle";
import TableCellDetail from "./TableCellDetail";
import TableCellAccessory from "./TableCellAccessory";

class TableCell extends React.Component {

    static propTypes = {
        underlayColor: PropTypes.string,
        activeOpacity: PropTypes.number,
        onPress: PropTypes.func,
        touchAble: PropTypes.bool
    };

    static defaultProps = {
        underlayColor: '#e2e2e2',
        activeOpacity: 1,
        onPress: () => null,
        touchAble: true
    };

    render() {
        const Component = this.props.touchAble ? TouchableHighlight : View;
        return (
            <Component
                underlayColor={this.props.underlayColor}
                activeOpacity={this.props.activeOpacity}
                onPress={this.props.onPress}
            >
                <View style={{
                    padding: 15,
                    flexDirection: 'row',
                    borderBottomColor: '#e0e0e0',
                    borderBottomWidth: 0.5,
                    ...this.props.style
                }}>
                    {this.props.children}
                </View>
            </Component>
        );
    }

    static Icon = TableCellIcon;
    static Content = TableCellContent;
}

TableCell.Title = TableCellTitle;
TableCell.SubTitle = TableCellSubTitle;
TableCell.Detail = TableCellDetail;
TableCell.Accessory = TableCellAccessory

export default TableCell;
